@baseSize: 14px;

.bgTransition() {
    transition: background 0.8s ease-in;
}

.bgSize(){
    background-size: 100% 101%;
    width: @baseSize;
    .bgTransition();
}



// 执行时 引入图片报错
// .topCss(@theme, @active) {
//     align-items: flex-end;
//     height: 26px;

//     .left {
//         background:~'url(./images/@{theme}top-l@{active}.png)'top left no-repeat;
//         background-size: 100% 101%;
//         width: @baseSize;
//         .bgTransition();
//     }

//     .center {
//         background:~'url(./images/@{theme}top@{active}.png)'repeat-x;
//         background-size: auto 101%;
//         flex: 1;
//         .bgTransition();
//     }

//     .right {
//         background:~'url(./images/@{theme}top-r@{active}.png)'top left no-repeat;
//         .bgSize()
//     }
// }

// .centerCss(@theme, @active, @bgColor) {
//     align-items: flex-end;
//     flex: 1;

//     .left {
//         background:~'url(./images/@{theme}left@{active}.png)'top left repeat-y;
//         .bgSize()
//     }

//     .center {
//         .bgTransition();
//         background: @bgColor;
//         flex: 1;
//     }

//     .right {
//         background:~'url(./images/@{theme}right@{active}.png)'top left repeat-y;
//         .bgSize()
//     }
// }

// .bottomCss(@theme, @active) {
//     height: @baseSize;
//     align-items: stretch;

//     .left {
//         background:~'url(./images/@{theme}bottom-l@{active}.png)'bottom left;
//         .bgSize()
//     }

//     .center {
//         background:~'url(./images/@{theme}bottom@{active}.png)'repeat-x;
//         background-size: auto 101%;
//         flex: 1;
//         .bgTransition();
//     }

//     .right {
//         // background:~'url(./images/@{theme}bottom-r@{active}.png)'bottom left no-repeat;
//         .bgSize()
//     }
// }